<template>

  <form class="mui-input-group">

    <div class="mui-input-row">

      <label class="tit">收件人</label>

      <input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">

    </div>

    <div class="mui-input-row">

      <label class="tit">联系方式</label>

      <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">

    </div>

    <div class="mui-input-row">

      <label class="tit">所在地区</label>

      <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
      <div class="divwrap">

<div class="mask" @click="choose" v-show="show"></div>

<v-distpicker

  v-show="show"

  type="mobile"

  @province="onChangeProvince"

  @city="onChangeCity"

  @area="onChangeArea"

  :province="newInfo.province"

  :city="newInfo.city"

  :area="newInfo.district"

>

</v-distpicker>

</div>
    </div>

    <div class="mui-input-row">

      <label class="tit">详细地址</label>

      <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">

    </div>

    <div class="mui-button-row">

      <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
      <button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
    </div>

  </form>

</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
  components: {

'v-distpicker': VDistpicker

},
  data () {

    return {

      form: {

        name: '',

        tel: '',

        area: '',

        detail: '',


      },
      show: false,     // 是否显示遮罩层

        newInfo: {

          province: '', // 省

          city: '',     // 市

          area: '',     // 区

        }

    }

  },
  props: ['id'],

  created () {

    this.getAddress()

  },

  methods: {
    getAddress () {

if (!this.id) {

  return

}

this.$indicator.open({

  text: '加载中'

})

var params = { id: this.id }

this.$http.get('address/edit', { params: params }).then(res => {

  this.$indicator.close()

  if (res.data.code === 0) {

this.$toast(res.data.msg)

} else if (res.data.code === 1) {

this.form = res.data.data

} else if (res.data.code === 2) {

this.$router.push({ name: 'login' })

}

})

},
    save () {

this.$indicator.open({

  text: '提交中'

})
this.form.id = this.id

this.$http.post('address/save', this.form).then(res => {

  this.$indicator.close()

      if (res.data.code === 0) {

    this.$toast(res.data.msg)

    } else if (res.data.code === 1) {

    this.$toast(res.data.msg)

    this.$router.go(-1)

    } else if (res.data.code === 2) {

    this.$router.push({ name: 'login' })

}

})

},
    choose () {

      this.show = !this.show

      },

      onChangeProvince (data) {

      this.newInfo.province = data.value

      },

      onChangeCity (data) {

      this.newInfo.city = data.value

      },

      onChangeArea (data) {

      this.newInfo.area = data.value

      this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area

      this.show = false

      },
      del () {

this.$indicator.open({

  text: '删除中'

})

this.form.id = this.id

this.$http.post('address/del', this.form).then(res => {

  this.$indicator.close()

  if (res.data.code === 0) {

this.$toast(res.data.msg)

} else if (res.data.code === 1) {

this.$toast(res.data.msg)

this.$router.go(-1)

} else if (res.data.code === 2) {

this.$router.push({ name: 'login' })

}

})

}


  }

}

</script>

<style lang="scss" scoped>

  .mui-input-group .mui-button-row {

    height: auto;

  }

  .mui-input-clear {

    font-size: 14px;

  }

  .mui-input-group:before {

    list-style: none;

  }

  .mui-button-row {

    margin-top: 20px;

    button {

      margin: 20px 0;

      padding: 10px 0;

    }

  }

  .tit {

    color: #999;

  }

  input::-webkit-input-placeholder {

    color: #999;

  }

  input::-moz-placeholder {   /* Mozilla Firefox 19+ */

    color: #999;

  }

  input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */

    color: #999;

  }

  input:-ms-input-placeholder {  /* Internet Explorer 10-11 */

    color: #999;

  }

  .divwrap > .mask {

background: #000;

opacity: 0.3;

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.divwrap > .distpicker-address-wrapper {

color: #999;

background: #fff;

border-top: 1px solid #ccc;

z-index: 1;

height: 300px;

overflow-y: auto;

position: fixed;

left: 0;

bottom: 0;

width: 100%;

}

</style>
